import React, { useEffect, useState } from "react";

import { Button, List, Row, Col, Modal, message} from "antd";

import Item from "antd/lib/list/Item";
// axios
import axios from "../api/axios"
// url 
import Url from "../api/url"
// css
import "../style/articlelist.css"

const {confirm} = Modal

function Article_List(props) {
  let [data, setData] = useState([]);
  const getArticle = async()=>{
    await axios.get(Url.articleList).then(res=>{
      setData(res.data.data)
    })
  }

  useEffect(()=>{
    getArticle()
  },[])

  const deleteArticle=function(id){

    confirm({
      title: '是否删除?',
      content: '删除后将无法找回',
      onOk() {
        axios.get(Url.deleteById,{id:id}).then(res=>{
          if(res.data.state){
            message.success("删除成功")
          }else{
            message.success("删除失败")
          }
          getArticle()  
          
      })
      },
      onCancel() {
        message.info("取消删除")
      },
    });
     
  }

  const ChangeArticle =(id)=>{
    props.history.push({pathname:"/admin/add",query:{id:id}})
  }
  return (
    <div>
      <List
        header={
          <Row className="list-div">
            <Col span={8}>
              <b>标题</b>
            </Col>
            <Col span={4}>
              <b>类别</b>
            </Col>
            <Col span={4}>
              <b>发布时间</b>
            </Col>
            <Col span={4}>
              <b>浏览量</b>
            </Col>
            <Col span={4}>
              <b>操作</b>
            </Col>
          </Row>
        }
        bordered
        dataSource={data}
        renderItem={Item => {
         return (<List.Item>
            <Row className="list-div">
              <Col span={8}>
                <b>{Item.title}</b>
              </Col>
              <Col span={4}>
                <b>{Item.type_name}</b>
              </Col>
              <Col span={4}>
                <b>{Item.create_time}</b>
              </Col>
              <Col span={4}>
                <b>{Item.view_count}</b>
              </Col>
              <Col span={4}>
                <Button type="primary" onClick={()=>{
                  ChangeArticle(Item.id)
                }}>修改</Button>
                <Button type="dashed" onClick={()=>{deleteArticle(Item.id)}} >删除</Button>
              </Col>
            </Row>
          </List.Item>)
        }}
      />
    </div>
  );
}

export default Article_List;
